<!-- 
*   @Description:用户管理
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div class="productService_box">
    <searchFrom @forSubmit="resData" ref="searchFrom"></searchFrom>
    <!-- 表格组件 -->
    <tableTemplate
      v-bind="tableConfigObject"
      class="CHAGE_SCROLLBAR productService_table"
    >
      <template slot="btnSlotName" slot-scope="{ item }">
        <el-button
          type="text"
          @click="($event) => buttonClickFunction(item, '查看')"
          >查看</el-button
        >
        <el-button
          type="text"
          @click="($event) => buttonClickFunction(item, '编辑')"
          >编辑</el-button
        >
        <el-button
          type="text"
          @click="($event) => buttonClickFunction(item, '删除')"
          >删除</el-button
        >
      </template>
    </tableTemplate>
    <!-- 分页组件 -->
    <paginationTemplate
      v-bind="paginationObject"
      @currentChangeFunction="resData"
    ></paginationTemplate>
    <!-- 弹出框测试 -->
    <taskInFoDialog ref="taskInFoDialogRef" @resData="resData"></taskInFoDialog>
  </div>
</template>

<script>
import searchFrom from "@/views/terrace/userInformation/components/searchFrom.vue";
import tableTemplate from "@/components/TableTemplate.vue";
import taskInFoDialog from "@/views/terrace/userInformation/components/taskInFoDialog.vue";
import paginationTemplate from "@/components/PaginationTemplate.vue";
import { fromConfig } from "./config/config";
import { setLookFunction } from "@/api/login";
export default {
  name: "userInformation",
  components: {
    searchFrom,
    tableTemplate,
    taskInFoDialog,
    paginationTemplate,
  },
  data() {
    return {
      tableConfigObject: {
        //表头数据
        elTableListData: [
          {
            username: "张三",
            userPassworld: "566",
            cellphoneNumber: "123",
            type: "管理员",
            disableUser: "正常",
            userEntryTime: "2023-05-18",
          },
        ],
        // 表头行配置
        elTableListConfig: fromConfig,
      },
      // 分页组件使用的数据
      paginationObject: {
        layout: "prev , pager, next, jumper",
        pageSize: 8,
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 0,
      },
    };
  },
  mounted() {
    this.getWebData();
  },
  methods: {
    buttonClickFunction(itVal, type) {
      if (type == "编辑" || type == "查看") {
        this.$refs.taskInFoDialogRef?.handleOpen(itVal, type);
      } else if (type == "删除") {
        this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.delDataFunction(itVal);
          })
          .catch(() => {
            this.$notify.info({ title: "提示", message: "已取消删除操作" });
          });
      }
    },
    //初始化 发送网络请求获取数据
    getWebData() {
        let parm = {
        ...this.$refs.searchFrom.getSearchForm(),
        pageSize: this.paginationObject.pageSize,
        currentPage: this.paginationObject.currentPage,
      };
      console.log(parm)
        setLookFunction(parm).then((res) => {
            console.log(res)
            if(res.status != 200) return
            this.tableConfigObject.elTableListData = res.data.data
            this.paginationObject.total = res.data.totalpage
        });
    },

    //增删改查后 刷新数据
    resData(val = 1) {
        if (val != "编辑") this.paginationObject.currentPage = val;
        this.getWebData();
    },
  },
};
</script>

<style scoped lang="less">
.productService_box {
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 16px 30px;
}
.productService_table {
  height: 600px;
}
</style>
